🔍 Summary

이번 변경사항은 에디터의 핵심 뷰인 Canvas 컴포넌트의 렌더링 엔진을 구현하는 작업입니다. 단순한 리스트 렌더링이 아닌, 부모-자식 관계를 표현할 수 있는 재귀적 트리 렌더링 로직을 완성했습니다. 또한, Vitest를 도입하여 다양한 시나리오(Empty, Flat, Nested)에 대한 안정성을 검증했습니다.

✨ Key Changes

1. 재귀적 트리 렌더링

• 🌲renderTree 함수: Canvas.tsx 내에 재귀 함수를 구현하여, DB의 Flat한 노드 데이터를 Tree 구조로 변환하여 렌더링합니다.
• 🛡️ Root 노드 처리: 최상위 Root 노드(id: null)는 래퍼 없이 자식들만 렌더링하도록 예외 처리를 추가하여 런타임 크러시를 방지했습니다.

2. 컴포넌트 아키텍처 개선

• 🧱 Container 컴포넌트: 자식 요소를 포함할 수 있는 컨테이너 개념을 도입했습니다.
• 🔄 NodeRenderer 고도화: node.type에 따라 적절한 컴포넌트를 매핑하고, 모든 컴포넌트가 children을 받아 렌더링할 수 있도록 구조를 통일했습니다.

3. 테스트 환경 구축 및 검증

• 🧪 Vitest 도입: apps/editor에 테스팅 환경을 구축(happy-dom, alias 설정 등)했습니다.

• ✅ 시나리오 검증:

  • Case 1: 노드가 없을 때
  • Case 2: 형제 노드만 있을 때
  • Case 3: 부모-자식 중첩 구조일 때
  • Case 4: 3단계 이상 깊은 중첩

• ✅ Checklist

  • 재귀 렌더링이 무한 루프 없이 정상 동작하는가?

  • Root 노드가 불필요하게 렌더링되지 않는가?

  • 모든 테스트 케이스가 Pass 하는가?